<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>插入</title>
	<style type="text/css">
		.row{
			display: none;
		}
		.box .row{
			display: block;
		}
	</style>
</head>
<body>
	<div class="box">
		<input type="" name="" class="clone">
		<button class="add">+</button>
	</div>
	
	<div class="row">
		<input type="" name="">
		<button class="remove">-</button>
	</div>

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		// $('.box')
		$('.add').click(function(){
			var row = $('.row').first().clone() 
			$(this).before(row) 
		})
		
		// 对于后面添加的元素，需要使用on事件
		// 委托事件 将子元素的事件委托给父元素
		// $('父元素').on('事件名称','子元素', function(){})
		// off
		$('.box').on( 'click', '.remove', function(){
			console.log($(this).index('.remove')) // 得到当前remove在remove数组元素里面的下标
			$(this).parent().remove()
		})

	</script>
</body>
</html>